<template>
  <div class="page">
    <Header goback="true" :headerTitle="titleAddress"></Header>
    <div class="content paddingTop">
      <div class="clear draw-bottom first-top">
        <div class="icon-outer-position clear">
          <input type="text" class="user-in-common" placeholder="账号" />
          <span
            class="icon-user iconfont icon-yonghuguanli_huaban user-icon-common"
          ></span>
        </div>
      </div>
      <div class="clear draw-bottom">
        <div class="icon-outer-position clear">
          <input type="text" class="user-in-common" placeholder="旧密码" />
          <span
            class="icon-user iconfont icon-weibiaoti-- user-icon-common"
          ></span>
        </div>
      </div>
      <div class="clear draw-bottom">
        <div class="icon-outer-position clear">
          <input type="text" class="user-in-common" placeholder="新密码" />
          <span
            class="icon-user iconfont icon-weibiaoti-- user-icon-common"
          ></span>
        </div>
      </div>
      <div class="clear draw-bottom">
        <div class="icon-outer-position clear">
          <input type="text" class="user-in-common" placeholder="确认密码" />
          <span
            class="icon-user iconfont icon-weibiaoti-- user-icon-common"
          ></span>
        </div>
      </div>
      <div class="user-code clear user-common draw-bottom">
        <div class="icon-outer-position code-icon clear">
          <input type="text" class="user-in-common" placeholder="验证码" />

          <span class="iconfont icon-yanzhengma user-icon-common"></span>
          <div class="imgcode">
            <img src="../../../static/images/qq.png" alt="" />
            <div class="tabs-code">
              <p>看不清</p>
              <p>换一张</p>
            </div>
          </div>
        </div>
      </div>
      <p class="confirm-change">确认修改</p>
    </div>
  </div>
</template>

<script>
import Header from "Components/header/header.vue";
export default {
  data() {
    return {
      titleAddress: "重置密码",
    };
  },
  components: { Header },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin.scss";
.first-top {
  margin-top: 0.8rem;
}
// 公共样式
.icon-outer-position {
  background: #fff;
  padding: 0.3rem 0.7rem 0.3rem 2rem;
}
.user-in-common {
  width: 100%;
  height: 1.5rem;
  float: left;
}
.user-icon-common {
  float: left;
  margin-left: -100%;
  transform: translateX(-150%);
  line-height: 1.5rem;
}
.code-icon {
  padding-right: 6rem;
}
.imgcode {
  float: left;
  margin-right: -5.5rem;
  width: 5.5rem;
  height: 1.5rem;
  display: flex;
  img {
    // width: ;
    height: 100%;
    flex: 3.5rem;
  }
}
.tabs-code {
  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  p {
    @include sc(0.4rem, #666);
  }
}
.confirm-change {
  margin: 0.3rem 0.5rem 0;
  padding: 0.5rem 0;
  text-align: center;
  @include sc(0.7rem, #fff);
  background: #4cd964;
  border-radius: 5px;
}
</style>